<div class="group row">
    <div class="group_2 column">
        <h5 class="h5">Sign in</h5>
        <div class="group_1 row">
            <div id="google-button"></div>
        </div>
        <form class="column" [formGroup]="form" (ngSubmit)="signIn()">
            <igx-input-group type="border" class="user-input">
                <igx-suffix>
                    <igx-icon family="material" class="icon">email</igx-icon>
                </igx-suffix>
                <input type="text" igxInput formControlName="email" />
                <label igxLabel>Email</label>
                <igx-hint *ngIf="fieldHasError('email', 'required')">Please enter your email.</igx-hint>
                <igx-hint *ngIf="fieldHasError('email', 'email')">Please enter a valid email address.</igx-hint>
            </igx-input-group>
            <igx-input-group type="border" class="user-input">
                <igx-suffix>
                    <igx-icon family="material" class="icon" (click)="showHidePassword()">{{ showPassword ?
                        'visibility' : 'visibility_off' }}</igx-icon>
                </igx-suffix>
                <input [type]="showPassword ? 'text' : 'password'" [required]="false" igxInput
                    formControlName="password" />
                <label igxLabel>Password</label>
                <igx-hint *ngIf="fieldHasError('password', 'required')">Please enter your password.</igx-hint>
            </igx-input-group>
            <span class="error" *ngIf="serverErrorMessage">{{serverErrorMessage}}</span>
            <button igxButton="raised" igxRipple class="user-input">Sign in</button>
            <a routerLink="/account/forgot-password" >Forgot password?</a>
            <button type="button" igxButton="outlined" igxRipple class="user-input" routerLink="/account/register">Create New Account</button>
        </form>
    </div>
</div>